<template>
    <div class="eCommerce-all-data-box" v-loading="loading">
        <div class="ruler-box">
            <div class="ruler-body">
                <div>
                    <span style="margin-right: 20px">关键字：</span>
                    <el-input
                        placeholder="请输入关键字"
                        @keyup.enter.native="getGame(1)"
                        style="width:220px;"
                        clearable
                        v-model.trim="searchKeyword">
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                    <el-button type="primary" class="btn" @click="getList(1)">查询</el-button>
                </div>
                <el-button type="success" class="btn" @click="showEditDilalog">添加匹配规则</el-button>
            </div>
        </div>
        <div class="table-box">
            <el-table
                :data="list"
                border
                @sort-change="sortChange"
                style="width: 100%">
                <el-table-column
                    label="商品标题">
                    <template slot-scope="scope">
                        <span>{{scope.row.title || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="商品规格">
                    <template slot-scope="scope">
                        <span>{{scope.row.spec || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="游戏">
                    <template slot-scope="scope">
                        <div>{{scope.row.gameType === 1 ? '王者荣耀' : '和平精英'}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="系统">
                    <template slot-scope="scope">
                        <span>{{scope.row.areaType === 1 ? '安卓' : 'IOS'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="策略">
                    <template slot-scope="scope">
                        <span>{{scope.row.sortType === 0 ? '推荐排序' : scope.row.sortType === 1 ? '低价优先' : '高价优先'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    min-width="120"
                    label="规则">
                    <template slot-scope="scope">
                        <span>{{scope.row.ruleDesc || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    min-width="120"
                    label="操作">
                    <template slot-scope="scope">
                        <el-button plain style="margin-left: 10px;" type="warning" @click="showEditDilalog(scope.row)">编辑</el-button>
                        <el-button plain style="margin-left: 10px;margin-bottom: 10px;" type="danger" @click="delRuler(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page.sync="pageNum"
                :page-sizes="_pageSizes"
                :page-size.sync="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <!-- 添加匹配规则 -->
        <el-dialog
            class="dialog-box"
            :title="`添加匹配规则`"
            width="600px"
            :visible.sync="selectorVisible">
            <div class="dialog-header">
                <div class="list">
                    <span>商品标题</span>
                    <el-input
                        placeholder="商品标题"
                        style="width:200px;"
                        clearabl
                        v-model="goodTitle"
                        >
                    </el-input>
                </div>
                <div class="list">
                    <span>规格</span>
                    <el-input
                        placeholder="请输入规格"
                        style="width:200px;"
                        clearable
                        v-model="goodRuler"
                        >
                    </el-input>
                </div>
                <div class="list">
                    <span>游戏</span>
                    <el-select @change="selectGameChange" style="width:115px;" v-model="gameName">
                        <el-option label="王者荣耀" :value="1"></el-option>
                        <el-option label="和平精英" :value="2"></el-option>
                    </el-select>
                </div>
                <div class="list">
                    <span>设备</span>
                    <el-select @change="selectChange" style="width:115px;" v-model="deviceName">
                        <el-option label="安卓" :value="1"></el-option>
                        <el-option label="IOS" :value="2"></el-option>
                    </el-select>
                </div>
                <div class="list">
                    <span>排序</span>
                    <el-select @change="selectorSortChange" style="width:115px;" v-model="sortName">
                        <el-option label="推荐排序" :value="0"></el-option>
                        <el-option label="低价优先" :value="1"></el-option>
                        <el-option label="高价优先" :value="2"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="content">
            <WzSelctor
                pageType="home"
                ref="selector"
                type="rent"
                :editSelectorInfo="editSelectorInfo"
                @resetParam="resetParam"
                @submit="selectorSubmit"
                @updateSelectorLabelSkins="updateSelectorLabelSkins"
            ></WzSelctor>
                <!-- :editSelectorInfo="editSelectorInfo" -->

            </div>
        </el-dialog>
    </div>
</template>

<script>
import { formatDate, conversion } from '@/utils/utils'
import WzSelctor from './components/selector'
export default {
    components: {
      WzSelctor
    },
    data () {
        return {
            searchKeyword: '',
            goodTitle: localStorage.getItem('goodTitle_pdd') || '',
            goodRuler: '',
            gameName: '王者荣耀',
            gameType: 1,
            deviceName: '安卓',
            areaType: 1,
            sortName: '低价优先',
            sortType: 1,
            loading: false,
            list: [],
            pageNum: 1,
            pageSize: this._pageSize,
            total: 0,
            userNickname: '',
            userId: '',
            date: [], // 时间
            type: '',
            order: '',
            selectorVisible: false,
            editSelectorInfo: {},
            editId: null
        }
    },
    created () {
        this.getList(1)
    },

    methods: {
        showEditDilalog (info) {
            this.selectorVisible = true
            if (info && info.id) {
                this.editId = info.id
                if (info.title)  this.goodTitle = info.title
                if (info.spec)  this.goodRuler = info.spec
                if (info.gameType) { 
                    this.gameType = info.gameType 
                    this.gameName = (info.gameType === 1 ? '王者荣耀' : '和平精英' )
                }
                if (info.areaType) { 
                    this.areaType = info.areaType
                    this.deviceName = (info.areaType === 1 ? '安卓' : 'IOS' )
                }
                this.sortType = info.sortType
                this.sortName = (info.sortType === 0 ? '推荐排序' : info.sortType === 1 ? '低价优先' : '高价优先' )
                this.editSelectorInfo = JSON.parse(info.rule || '{}')
                return
            }
            this.resetParam() 
            this.$nextTick(() => {
                this.$refs.selector.resetSelector()
            })
        },
        // 重置为空
        resetParam () {
            this.goodTitle = localStorage.getItem('goodTitle_pdd')
            this.goodRuler = ''
            this.gameName = '王者荣耀'
            this.gameType = 1
            this.deviceName = '安卓'
            this.areaType = 1
            this.sortName = '低价优先'
            this.sortType = 1,
            this.editSelectorInfo = {}
            this.editId = null
        },
        selectGameChange(id) {
            this.gameType = id
        },
        selectChange(id) {
            this.areaType = id
        },
        selectorSortChange (id) {
            console.log(id, 'ooooo')
            this.sortType = id
        },
        // 删除商品匹配规则
        delRuler (row) {
            this.$http.post('/thirdOrder/delMatchRule', {
                    ruleId: row.id
                }).then(res => {
                if (res.code === '0') {
                    this.getList(1)
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: err.desc
                    })
                }
            }).catch((err) => {
                this.$message({
                    type: 'error',
                    message: err.desc
                })
            })
        },
        // 筛选
        selectorSubmit (params) {
            let obj = {}
            obj.spec = this.goodRuler
            obj.title = this.goodTitle
            localStorage.removeItem('goodTitle_pdd')
            localStorage.setItem('goodTitle_pdd', this.goodTitle)
            obj.gameType = this.gameType
            obj.areaType = this.areaType
            params.sortType = this.sortType
            console.log(params.sortType, 'params.sortType')
            obj.id = this.editId
            if (this.goodTitle === '') {
                return this.$message({
                    type: 'error',
                    message: '商品标题不能为空'
                })
            }
            if (this.goodRuler === '') {
                return this.$message({
                    type: 'error',
                    message: '规格不能为空'
                })
            }
            this.$http.post('/thirdOrder/saveUpdateGoodsMatchRule', {
                    ...obj,
                    rule: JSON.stringify(params)
                }).then(res => {
                if (res.code === '0') {
                    this.$message({
                        type: 'success',
                        message: this.editId !== null ? '编辑成功' : '添加成功'
                    })
                    this.selectorVisible = false
                    this.$nextTick(() => {
                        this.$refs.selector.resetSelector()
                    })
                    this.resetParam()
                    this.getList(1)
                } else {
                    this.$message({
                        type: 'error',
                        message: err.desc
                    })
                }
            }).catch((err) => {
                this.$message({
                    type: 'error',
                    message: err.desc
                })
            })
        },
        updateSelectorLabelSkins () {},
        async getList (num) {
            if (this.loading) return
            this.loading = true
            this.pageNum = num

            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }

            if (this.searchKeyword) params.keyword = this.searchKeyword

            let res = await this.$http.post('/thirdOrder/goodsMatchRules', {
                ...params
            })
            if (res.code === '0') {
                this.list = res.data.list
                this.total = res.data.totalRow
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        sizeChange (val) {
            this.pageSize = val
            this.getList(1)
        },

        pageChange (val) {
            this.getList(val)
        },

        // 后端排序
        sortChange ({ column, prop, order }) {
            this.sort = order || ''
            // 如果没有 sort prop 置为空
            if (!this.sort) {
                this.type = null
            } else {
                if (this.sort === 'ascending') {
                    this.sort = 'asc'
                } else {
                    this.sort = 'desc'
                }
                this.type = prop
            }
            this.getList(1)
        },

        // 查看用户详情
        goUserDetail (id) {
            this.$router.push(`/dataReport/userInfo?id=${id}`)
        },

        // 数字转换
        conversion (val) {
            return conversion(val)
        }
    },

    filters: {
        timeInit (val) {
            if (val) {
                return formatDate(val, 'YYYY-MM-DD')
            } else {
                return '-'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .eCommerce-all-data-box {
        /deep/ .el-dialog__body {
            border-top: 1px solid rgba(5, 2, 2, 0.05);
        }
        .dialog-header {
            display: flex;
            flex-wrap: wrap;
            .list {
                flex: 1;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-bottom: 15px;
                margin-left: 10px;
                span {
                    min-width: 60px;
                    margin-right: 10px;
                }
            }
        }
        .ruler-box {
            margin-top: 10px;
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 60px;
            .ruler-body {
                display: flex;
                justify-content: flex-start;
              .ruler-list {
                display: flex;
                justify-content: flex-start;
              }
            }
            .btn {
                margin-left: 10px;
            }
        }
        .table-box {
            margin: 20px 0;
            .table-btn {
                cursor: pointer;
                color: #409EFF;
                font-size: 13px;
                font-weight: 500;
                &:hover {
                    text-decoration: underline;
                }
            }
        }
        .tools {
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }
    }
</style>
